<template>
  <el-row class="sort-page">
    <!-- 左侧 -->
    <el-col :span="5">

      <div class="type-list">

        <div @click="typeChangeHandle(0, undefined)" class="type-item first" :class="{'active': typeIndex === 0, 'load': dataLoad }" >
          综合排行
        </div>
        <div @click="typeChangeHandle(1, '热门博客列表为空，浏览可使博客变热门！')" class="type-item" :class="{'active': typeIndex === 1, 'load': dataLoad }">
          热门博客
        </div>
        <div @click="typeChangeHandle(2, '没有博客被推荐查看')" class="type-item" :class="{'active': typeIndex === 2, 'load': dataLoad }">
          网站推荐
        </div>
      </div>
    </el-col>
    <!-- 中间 -->
    <el-col :span="14">
      <!-- 头部标题 -->
      <div class="s-c-header">

        <div class="s-c-h-left">
          <div v-show="typeIndex === 0">

            <span @click="synthesizeChangeHandle(0, '今日没有新发布的博客。')" class="title" :class="{'active': synthesizeIndex === 0, 'load': dataLoad }" >
              今日
            </span>
            <span @click="synthesizeChangeHandle(1, '当前月没有新发布的博客。')" class="title" :class="{'active': synthesizeIndex === 1, 'load': dataLoad }" >
              月份
            </span>
            <span @click="synthesizeChangeHandle(2, '没有博客被用户收藏，快去收藏博客吧。')" class="title" :class="{'active': synthesizeIndex === 2, 'load': dataLoad }" >
              收藏
            </span>
          </div>
          <div v-show="typeIndex === 1">
            <span class="title">
              热门博客
            </span>
          </div>
          <div v-show="typeIndex === 2">
            <span class="title">
              网站推荐
            </span>
          </div>
        </div>

        <div class="s-c-h-right">

          <div class="search">
            <transition name="el-fade-in-linear">
              <span v-show="!searchBlogVisible" class="word">
                {{ searchFrom.word }}
              </span>
            </transition>

            <span class="sort-type">
              <el-tooltip effect="light" :content="searchBlogTitle" placement="top">
                <svg-icon @click="searchButtonClickHandle" icon-class="search"
                          :class="searchBlogVisible ? 'active' : '' " class="fz16" />
              </el-tooltip>
            </span>
          </div>

          <transition name="slide-fade">
            <div v-show="typeIndex !== 0">
              <span @click="blogSortHandle(0)" class="sort-type"
                    :class="{ 'active': blogSortIndex === 0, 'load': dataLoad || blogList.length === 0 }">
                最新
              </span>
                <span @click="blogSortHandle(1)" class="sort-type"
                      :class="{ 'active': blogSortIndex === 1, 'load': dataLoad || blogList.length === 0 }">
                浏览最多
              </span>
                <span @click="blogSortHandle(2)" class="sort-type"
                      :class="{ 'active': blogSortIndex === 2, 'load': dataLoad || blogList.length === 0 }">
                点赞最多
              </span>
            </div>
          </transition>

        </div>

      </div>
      <!-- 显示博客列表 -->
      <div class="s-c-list">

        <el-skeleton :loading="dataLoad" :rows="15" :throttle="200" animated>
          <template>

            <el-card shadow="hover" v-for="blog in blogList" :key="blog.blogId" @click.native="toBlogDetailHandle(blog.blogId)" class="blog">
              <el-row>
                <!-- 博客图片 -->
                <el-col :span="7" class="blog-image">
                  <!--图片-->
                  <el-image fit="fill" lazy :src="blog.firstPicture" class="image">
                    <div slot="placeholder">
                      加载中...
                    </div>
                  </el-image>
                </el-col>
                <!-- 相关内容 -->
                <el-col :span="17" class="blog-content">
                  <div class="blog-title">
                    <span class="title">{{ blog.title }}</span>
                  </div>
                  <div class="blog-user">
                    <svg-icon icon-class="user2" class="fz14"/>
                    <span style="font-family: SimHei,serif">{{ blog.userName }}</span>
                  </div>
                  <div class="blog-info-bottom">
                    <svg-icon icon-class="label" class="fz14" style="color: rgb(248,168,168)" />
                    <span>{{ blog.label === 0 ? '原创' : blog.label === 1 ? '转载' : '翻译' }}</span>

                    <svg-icon icon-class="clock" class="ml10 fz14" style="color: rgb(135,212,237)" />
                    <span>{{ blog.issueTime }}</span>
                  </div>
                  <div class="blog-info-bottom">

                    <svg-icon icon-class="like" class="fz14" />
                    点赞(<span style="color: #0e92b3">{{ blog.likeNum || 0 }}</span>)

                    <svg-icon icon-class="comment" class="ml7 fz14" />
                    评论(<span style="color: #0e92b3">{{ blog.commentNum || 0 }}</span>)

                    <svg-icon icon-class="view" class="ml7 fz14"/>
                    浏览(<span style="color: #0e92b3">{{ blog.viewNum || 0 }}</span>)
                  </div>
                </el-col>
              </el-row>
            </el-card>


            <el-empty v-if="blogList.length === 0" :description="zeroBlogTitle"></el-empty>

          </template>
        </el-skeleton>

      </div>

      <!-- 底部分页插件 -->
      <blog-paging v-show="blogList.length !== 0"
                   :data-load="dataLoad" :page-size="pageSize"
                   :page-index="pageIndex" :total-num="totalNum"
                   @page-change="pageChangeHandle" @current-change="currentChangeHandle" />
    </el-col>
    <!-- 右侧 -->
    <el-col :span="5">
      <search-blog v-show="searchBlogVisible" ref="sortSearch"
                   :data-load="dataLoad" @search-blog="searchBlogHandle"
                   @clear-word="searchBlogHandle" @close-search="closeSearchBlogHandle"/>

    </el-col>

  </el-row>
</template>

<script>
  import BlogPaging from "@/components/blog/blog-paging";
  import SearchBlog from "@/components/blog/search";
  import { scrollToTop } from "@/assets/js/scrollToTop";

  export default {
    layout: 'default',
    name: "blog-sort-index",
    components: { BlogPaging, SearchBlog },
    data() {
      return {
        // 显示数据类型下标[0-综合排行 1-热门博客 2-网站推荐]
        typeIndex: 0,
        // 综合排行下标[0-今日发布 1-月份发布 2-收藏排行]
        synthesizeIndex: 0,
        // 博客数组
        blogList: [],
        // 博客列表为空显示内容
        zeroBlogTitle: '今日没有新发布的博客。',
        // 当前展示页码
        pageIndex: 1,
        // 当前页显示个数
        pageSize: 8,
        // 当前博客数量
        totalNum: 0,
        // 是否正在加载数据[false-不加载 true-加载]
        dataLoad: false,
        // 博客排序类型[0-最新 1-浏览最多 2-点赞最多]
        blogSortIndex: 0,
        // 博客搜索框是否显示
        searchBlogVisible: false,
        // 搜索框按钮提示文字
        searchBlogTitle: '打开博客检索',
        // 热门博客搜索表单
        searchFrom: {
          // 搜索内容
          word: '',
        },
      }
    },
    // asyncData( { app, params, error } ) {
    //   return app.$axios.$post('/index/sort/synthesize/list', { sortType: 0, page: 1, limit: 8})
    //     .then(data => {
    //       return {
    //         blogList: data.page.list,
    //         totalNum: data.page.totalNum
    //       }
    //     })
    //     .catch(() => {})
    // },
    created() {
      if (process.client) {
        this.getSynthesisSortList()
      }
    },
    methods: {
      /**
       * 显示类型更换事件
       * @param {number} index   最新显示类型
       * @param {string} message 最新显示类型对应的博客列表为空时，文字提示信息
       */
      typeChangeHandle(index, message) {
        if (this.dataLoad || this.typeIndex === index) {
          return
        }
        this.typeIndex = index
        // 页码重置
        this.pageIndex = 1

        if (!!message) {
          this.zeroBlogTitle = message
        }

        if (index === 0) {
          this.getSynthesisSortList()
        } else {
          this.blogSortIndex = 0
          this.searchFrom.word = ''
          this.getHotOrRecommendBlogList()
        }
      },
      /**
       * 综合排序类型点击事件
       * @param {number} index   最新综合排序类型
       * @param {string} message 最新综合排序类型关联的博客列表为空时，文字提示信息
       */
      synthesizeChangeHandle(index, message) {
        if (this.synthesizeIndex === index) {
          return
        }
        // 对应类型的博客列表为空时，文字提示信息
        this.zeroBlogTitle = message

        this.synthesizeIndex = index

        this.getSynthesisSortList()
      },
      // 上下翻页操作
      pageChangeHandle(bool) {  // bool => false：上一页 true：下一页
        if (bool) {
          this.pageIndex++
        } else {
          this.pageIndex--
        }

        if (this.typeIndex === 0) {
          this.getSynthesisSortList()
        } else {
          this.getHotOrRecommendBlogList()
        }
      },
      // 点击特定页码操作
      currentChangeHandle(index) {
        this.pageIndex = index

        if (this.typeIndex === 0) {
          this.getSynthesisSortList()
        } else {
          this.getHotOrRecommendBlogList()
        }
      },
      // 显示博客搜索框事件
      searchButtonClickHandle() {

        let ss = this.$refs.sortSearch
        if (this.searchBlogVisible) {
          this.searchFrom.word = ss.getSearchWord()
        } else {
          ss.init(this.searchFrom.word)
        }

        this.searchBlogVisible = !this.searchBlogVisible
        this.searchBlogTitle = this.searchBlogVisible ? '关闭搜索框' : '打开博客检索'
      },
      // 检索博客输入框，输入值修改事件
      // 检索热门博客处理时间
      searchBlogHandle(word) {
        this.searchFrom.word = word
        // 页码恢复到第一页
        this.pageIndex = 1

        if (this.typeIndex === 0) {
          this.getSynthesisSortList()
        } else {
          this.getHotOrRecommendBlogList()
        }
      },
      // 关闭检索热门博客弹出框时间
      closeSearchBlogHandle(word) {
        this.searchFrom.word = word

        this.searchBlogVisible = false
        this.searchBlogTitle = '打开博客检索'
      },
      // 博客排序类型处理事件
      blogSortHandle(index) {
        if (this.blogList.length === 0 || this.blogSortIndex === index) {
          return
        }
        this.blogSortIndex = index

        this.getHotOrRecommendBlogList()
      },
      // 获取综合排行博客列表
      getSynthesisSortList() {
        let sortVo = {
          word: this.searchFrom.word,
          sortType: this.synthesizeIndex,
          page: this.pageIndex,
          limit: this.pageSize
        }
        // 综合排行博客列表数据加载
        this.dataLoad = true
        this.$axios.$post('/index/sort/synthesize/list', sortVo)
          .then(({ data:page }) => {
            this.blogList = page.list
            this.totalNum = page.totalNum

            scrollToTop()
          })
          .catch(() => {})
          .finally(() => {
            // 综合排行博客列表加载结束
            this.dataLoad = false
          })
      },
      // 获取热门博客或者网站推荐博客列表
      getHotOrRecommendBlogList() {
        // 表格数据加载
        this.dataLoad = true
        let url = this.typeIndex === 1 ? '/index/sort/hot/list' : '/index/sort/elite/list'
        let obj = {
          word: this.searchFrom.word,
          sortType: this.blogSortIndex,
          page: this.pageIndex,
          limit: this.pageSize
        }
        this.$axios.$post(url, obj)
          .then(({ data:page }) => {
            this.blogList = page.list
            this.totalNum = page.totalNum

            scrollToTop()
          })
          .catch(() => {})
          .finally(() => {
            // 表格加载结束
            this.dataLoad = false
          })
      },
      // 跳转至博客详细页面操作
      toBlogDetailHandle(blogId) {
        this.$router.push({ name: 'blog', params: { blogId} })
      },
    }
  }
</script>


<!--
  css字符对应
  s -> sort
  c -> content
-->
<style scoped>
  .sort-page {
    margin-top: 25px;
    margin-bottom: 20px;
    min-height: calc(100vh - 165px);
  }
</style>

<!-- 左侧类型选择样式 -->
<style scoped>
  .sort-page .type-list {
    width: 90px;
    float: right;
    margin-right: 25px;
    margin-top: 40px;
  }
  .type-list .type-item {
    padding: 10px 7px;
    text-align: center;
    border-left: 1px solid #008489;
    border-right: 1px solid #008489;
    border-bottom: 1px solid #008489;
    cursor: pointer;
    transition: background-color .28s;
  }
  .type-list .type-item.first {
    border-top: 1px solid #008489;
    border-radius: 4px 4px 0 0;
  }
  .type-list .type-item:last-child {
    border-radius: 0 0 4px 4px;
  }
  .type-list .type-item.active {
    background-color: #008489;
    color: white;
  }
  .type-list .type-item.load {
    cursor: not-allowed;
    color: #CCC;
  }
</style>

<!-- 中间博客列表样式 -->
<style scoped>
  .sort-page .s-c-header {
    height: 35px;
    line-height: 35px;
    border-bottom: 3px solid #c4d7d6;
  }
  .s-c-header .s-c-h-left {
    float: left;
    position: relative;
  }
  .s-c-h-left .title {
    margin-left: 5px;
    font-size: 16px;
    font-weight: bold;
    transition: color .28s;
    cursor: pointer;
  }
  .s-c-h-left .title:last-child {
    margin-right: 5px;
  }
  .s-c-h-left .title.active {
    color: rgb(255, 51, 0);
  }
  .s-c-h-left .title.load {
    cursor: not-allowed;
    color: #CCC;
  }
  .s-c-header .s-c-h-right {
    display: flex;
    float: right;
    position: relative;
  }
  .s-c-h-right .search {
    margin-left: 15px;
    margin-right: 15px;
  }
  .search .word {
    color: rgba(0, 0, 0, 0.5);
    margin-right: 5px;
  }
  .s-c-h-right .sort-type {
    margin-right: 5px;
    cursor: pointer;
    user-select: none;
    transition: color .28s;
  }
  .s-c-h-right .sort-type.active {
    color: rgb(255, 51, 0);
  }
  .s-c-h-right .sort-type.load {
    cursor: not-allowed;
    color: #CCC;
  }
  /* 搜索框按钮点击样式*/
  .s-c-h-right .sort-type .active {
    color: #0f95b0;
  }
  /* 可以设置不同的进入和离开动画 */
  /* 设置持续时间和动画函数 */
  .slide-fade-enter-active {
    transition: all .3s ease;
  }
  .slide-fade-leave-active {
    transition: all .5s cubic-bezier(1.0, 0.5, 0.8, 1.0);
    /*transition: all .5s;*/
  }
  .slide-fade-enter, .slide-fade-leave-to
    /* .slide-fade-leave-active for below version 2.1.8 */ {
    transform: translateX(10px);
    opacity: 0;
  }
</style>

<!-- 博客展示列表样式 -->
<style scoped>
  .sort-page .s-c-list {
    margin-top: 10px;
  }
  .s-c-list .blog {
    margin-top: 20px;
    cursor: pointer;
  }
  .blog .blog-image {
    padding-left: 10px;
  }
  .blog .blog-image .image {
    width: 100%;
    height: 160px;
  }
  .blog .blog-content {
    padding: 0 15px;
    font-size: 14px;
    position: relative;
    top: 50%; /*偏移*/
    transform: translateY(20%);
  }
  .blog-content .blog-title {
    width: 100%;
    height: 30px;
    line-height: 30px;
    font-size: 18px;
    font-weight:bold;
    display :inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .blog-title .title {
    font-family: SimHei,serif;
    text-decoration: none;
    color: black;
    transition: color .28s;
  }
  .blog-content .blog-user, .blog-content .blog-info-bottom {
    margin-top: 10px;
  }
  .s-c-list .zero-blog {
    width: 100%;
    font-size: 20px;
    padding: 20px 0;
    color: red;
    text-align: center;
  }
</style>

<!-- 博客检索框样式 -->
<style scoped>
  .sort-page .search-blog {
    width: calc(100% - 10);
    /*height: 100px;*/
    margin-top: 10px;
    margin-left: 5px;
    margin-right: 5px;
    border: 1px solid #0f95b0;
    border-radius: 4px;
  }
  .search-blog .s-b-title {
    height: 30px;
    line-height: 30px;
    padding: 0 7px;
    border-bottom: 1px solid #0f95b0;
  }
  .s-b-title .s-b-t {
    font-size: 14px;
    font-weight: bold;
  }
  .s-b-title .s-b-close {
    float: right;
    margin-right: 5px;
    cursor: pointer;
  }
  .s-b-close .s-b-c-icon {
    transition: color .28s;
  }
  .s-b-close .s-b-c-icon:hover {
    color: #0f95b0;
  }
  .search-blog .s-b-content {
    margin-top: 7px;
    padding: 0 5px;
  }
  .search-blog .s-b-button {
    padding: 0 5px;
    margin: 7px 0;
  }
  .s-b-button .s-b-b-btn {
    width: 100%;
  }
</style>



